<template>
    <div class="layout">
       <Layout>
        <Header class="header">
            <Row>
                <Col span="4" >
                <img src="../assets/images/logo.png" alt="" style="vertical-align:middle">
                </Col>
                <Col span="4" offset="16" >
                <Row>
                    <Col span="4">
                    注销
                    </Col>
                    <Col span="20">
                    <Dropdown style="margin-left: 20px" placement="bottom-end">
                    <a href="javascript:void(0)">
                        鑫安利管理<Avatar></Avatar>
                        <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                            <DropdownItem>驴打滚</DropdownItem>
                            <DropdownItem>炸酱面</DropdownItem>
                            <DropdownItem>豆汁儿</DropdownItem>
                            <DropdownItem>冰糖葫芦</DropdownItem>
                            <DropdownItem>北京烤鸭</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    </Col>
                </Row>
                </Col>
            </Row>
        </Header>
        <Layout>
            <Sider class="sider" breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed" >
                <Menu ref="leftMenu"  @on-select="handleSelect" :open-names="open" :active-name="active"  theme="light" width="auto" :class="menuitemClasses" >
                    <Submenu name="1">
                        <template slot="title">
                           <Icon type="ios-home-outline" />
                            我的项目
                        </template>
                        <MenuItem to="/MyProjectFlow" name="/MyProjectFlow">项目流程</MenuItem>
                        <MenuItem to="/MyProjectProgress" name="/MyProjectProgress">正在进行</MenuItem>
                        <MenuItem to="/MyProjectQuery" name="/MyProjectQuery">项目查询</MenuItem>
                        <MenuItem to="/MyProjectCheck" name="/MyProjectCheck">我的审核</MenuItem>
                        <MenuItem to="/MyProjectArrange" name="/MyProjectArrange">项目分配</MenuItem>
                        <MenuItem to="/MyProjectStock" name="/MyProjectStock">项目库</MenuItem>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="ios-list" />
                            会员中心
                        </template>
                        <MenuItem to="/UserHeartData" name="/UserHeartData">基本资料</MenuItem>
                        <MenuItem to="/UserHeartInstall" name="/UserHeartInstall">设置</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                          <Icon type="ios-person-add-outline" />
                            消息中心
                        </template>
                        <MenuItem to="/NewHeart" name="/NewHeart">消息中心</MenuItem>                       
                    </Submenu>
                    <Submenu name="4">
                        <template slot="title">
                            <Icon type="md-menu" />
                            关于我们
                        </template>
                        <MenuItem to="/aboutus" name="/aboutus">关于我们</MenuItem>
                        <MenuItem to="/AboutUsAdvise" name="/AboutUsAdvise">问题反馈</MenuItem>
                    </Submenu>                   
                </Menu>
                <div slot="trigger"></div>
            </Sider>
            <Content>
                <Card>
                    <slot></slot>
                </Card>
            </Content>
        </Layout>
        <Footer class="footer">
            <div>
                Copyright © 2018 www.anhuanjia.com  All Rights Resreved   |  京ICP备13038154号-6   安环家荣誉出品
            </div>
        </Footer>
    </Layout>
    </div>
     
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      open: [],
      active: this.$route.path
    };
  },
 created() {
    this.active = this.$route.path;
  },
  mounted: function() {
    this.open = ["1"];
    this.$nextTick(function() {
      this.$refs.leftMenu.updateOpened();
      this.$refs.leftMenu.updateActiveName();
    });
    this.handleSelect(this.active);
  },
  computed: {
    menuitemClasses: function() {
      return [
        "menu-item",
        this.isCollapsed ? "ivu-layout-sider-collapsed" : ""
      ];
    }
  },
   methods: {
    handleSelect: function(name) {
      //在这里做你想做的事情
      switch (name) {
        case "/admin/home":
          this.open = ["1"];
          break;
        case "/admin/UserManagementAll":
          this.open = ["2"];
          break;
        case "/admin/UserManagementStair":
          this.open = ["2"];
          break;
        case "/admin/UserManagementAdministration":
          this.open = ["2"];
          break;
        case "/admin/SystemManagementMenu":
          this.open = ["3"];
          break;
        case "/admin/SystemManagementHelp":
          this.open = ["3"];
          break;
        case "/admin/SystemManagementAbout":
          this.open = ["3"];
          break;
        case "/admin/DatabaseManagementManagement":
          this.open = ["4"];
          break;
        case "/admin/StatisticsAccount":
          this.open = ["5"];
          break;
        case "/admin/StatisticsProject":
          this.open = ["5"];
          break;
        case "/admin/Retroaction":
          this.open = ["6"];
          break;

        default:
          this.open = ["1"];
      }
    }
  } 
};
</script>

<style lang="less">
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.header {
  width: 100%;
  background: #ffffff;
  img {
    width: 100%;
  }
}
.ivu-layout-sider-zero-width-trigger{
    z-index: 10;
}
.sider {
  background: #025bb7;
  .ivu-layout-sider-children{
    position: relative;
  }
  .ivu-layout-sider-children::after{
    position: absolute;
    content:"";
    right: 0;
    width: 3px;
    // height: 69%;
    background: #2d8cf0;
  }
  .ivu-menu-light{
    background: #025bb7;
  }
  .ivu-menu-vertical.ivu-menu-light:after{
    width: 0;
  }
  .ivu-menu{
    color: #ffffff;
    a{
      background: #ffffff;
      color: #515a6e;
      border-bottom:1px solid  #dedfe3;
    }
  }
}
.footer div{
  text-align: center;
}

</style>